<template>
  <uv-popup ref="popup" round="15">
    <view class="popup-content">
      <view class="top  textCenter">添加好友</view>
      <uv-search placeholder="请输入好友" v-model="params.keyword" :showAction="false"></uv-search>
      <scroll-view :scroll-y="true" class="topList" @scrolltolower="scrolltolower">
        <view class="box" v-for="(item,index) in list" :key="index" @click="topicSelect(item)">
          <view class="flex alignCenter">
            <view class="left">
              <image :src="item.avatar" mode="aspectFill" />
            </view>
            <view class="info">
              <view class="fz14">{{item.nickname}}</view>
              <view class="fz12 desc">{{item.ageYear}}·{{item.industry}}·{{item.homeEconomize}}·{{item.city}}</view>
            </view>
          </view>
          <uv-divider text=""></uv-divider>
        </view>
      </scroll-view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

const valueData = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

let params = ref({
  keyword: "",
  page: 1,
  pageSize: 10,
});
let list = ref([]);
let totalPages = 0;

function open() {
  getInfo();
  instance.refs.popup.open("bottom");
}

async function getInfo() {
  let resp = await proxy.$apis.getContacts(params.value);
  let arr = [...list.value];
  if (resp.records.length) {
    arr = proxy.$utils.filterArr(arr, resp.records, "id");
  }
  list.value = arr;
  totalPages = resp.totalPages;
  console.log(resp);
}

function scrolltolower() {
  if (params.value.page >= totalPages) return;
  params.value.page++;
  getInfo();
}

function topicSelect(item) {
  if (valueData.value.length) {
    let index = proxy.$utils.findIndexByField(
      valueData.value,
      "friendId",
      item.userId
    );
    if (index == -1) {
      valueData.value.push({
        friendId: item.userId,
        nikeName: item.nickname,
      });
    } else {
      valueData.value.splice(index, 1);
    }
  } else {
    valueData.value.push({
      friendId: item.userId,
      nikeName: item.nickname,
    });
  }
  console.log("有时间", valueData.value);
  instance.refs.popup.close();
}

defineExpose({
  open,
});
</script>



<style lang="scss" scoped>
.popup-content {
  padding: 25px 15px;
  .top {
    margin-bottom: 15px;
  }
  .box {
    margin-top: 15px;
    .left {
      width: 48px;
      height: 48px;
      image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      margin-left: 10px;
      .desc {
        color: #999999;
      }
    }
  }
}
</style>

